export default {
  methods: {
    handleImgLoad () {
      let imgWidth = this.$refs.bigImg.width
      let imgHeight = this.$refs.bigImg.height

      this.bigImgWrapStyle = {
        width: 'auto',
        height: 'auto',
        top: `${this.baseTop}px`,
        left: `${this.baseLeft}px`,
        opacity: 0,
        scale: 1,
        rotate: 0
      }
      this.imgOriginSize = {
        width: imgWidth,
        height: imgHeight
      }
      this.handleSetImgWrapStyle()
    },
    handleSetImgWrapStyle () {
      let windowWidth = window.innerWidth - this.baseLeft
      let windowHeight = window.innerHeight - this.baseTop
      let imgWidth = this.$refs.bigImg.width
      let imgHeight = this.$refs.bigImg.height
      let width, height, top, left

      this.bigImgWrapStyle.opacity = 0
      if (imgWidth >= windowWidth && imgHeight >= windowHeight) {
        width = windowWidth + 'px'
        height = windowHeight + 'px'
        top = `${this.baseTop}px`
        left = `${this.baseLeft}px`
      } else if (imgWidth >= windowWidth && imgHeight < windowHeight) {
        width = windowWidth + 'px'
        height = (windowWidth / imgWidth) * imgHeight + 'px'
        top = (windowHeight - Number.parseInt(height)) / 2 + this.baseTop + 'px'
        left = `${this.baseLeft}px`
      } else if (imgWidth < windowWidth && imgHeight >= windowHeight) {
        width = (windowHeight / imgHeight) * imgWidth + 'px'
        height = windowHeight + 'px'
        top = `${this.baseTop}px`
        left = (windowWidth - Number.parseInt(width)) / 2 + this.baseLeft + 'px'
      } else {
        width = imgWidth + 'px'
        height = imgHeight + 'px'
        top = (windowHeight - Number.parseInt(height)) / 2 + this.baseTop + 'px'
        left = (windowWidth - Number.parseInt(width)) / 2 + this.baseLeft + 'px'
      }

      this.bigImgWrapStyle = Object.assign({}, this.bigImgWrapStyle, { width, height, top, left, opacity: 1 })
    },
    // 移动图片
    handleBigImgMouseDown (e) {
      this.mousePosition = Object.assign({}, this.mousePosition, {
        x: e.clientX,
        y: e.clientY,
        isDown: true
      })
    },
    handleBigImgMouseMove (e) {
      if (!this.mousePosition.isDown) return false

      let { x: previousX, y: previousY } = this.mousePosition
      let { top: previousTop, left: previousLeft } = this.bigImgWrapStyle
      let distanceX = e.clientX - previousX
      let distanceY = e.clientY - previousY

      this.bigImgWrapStyle = Object.assign({}, this.bigImgWrapStyle, {
        top: Number.parseInt(previousTop) + distanceY + 'px',
        left: Number.parseInt(previousLeft) + distanceX + 'px'
      })
      this.mousePosition = Object.assign({}, this.mousePosition, {
        x: e.clientX,
        y: e.clientY
      })
    },
    handleBigImgMouseUp (e) {
      this.mousePosition.isDown = false
    },
    // 缩放
    handleScaleImg (base) {
      let { scale } = this.bigImgWrapStyle

      this.bigImgWrapStyle.scale = scale + base
    },
    handleWheelScalse (e) {
      if (!this.view) return false

      if (e.deltaY > 0) {
        this.handleScaleImg(-0.05)
      } else {
        this.handleScaleImg(0.05)
      }
    },
    // 切换图片
    handleChangeImg (count) {
      let newIndex = this.currentSrcIndex + count
      if (newIndex > this.previewSrcList.length - 1) {
        newIndex = newIndex - this.previewSrcList.length
      } else if (newIndex < 0) {
        newIndex = this.previewSrcList.length + newIndex
      }

      this.opacityAnimationClass = false
      this.bigImgWrapStyle = Object.assign({}, this.bigImgWrapStyle, {
        width: 'auto',
        height: 'auto',
        top: `${this.baseTop}px`,
        left: `${this.baseLeft}px`,
        opacity: 0,
        scale: 1,
        rotate: 0
      })
      setTimeout(() => {
        this.currentSrcIndex = newIndex
        this.opacityAnimationClass = true
      }, 0)
    },
    // 切换图片适合窗口和1:1显示
    handleSwitchImgSize () {
      if (!this.imgIsOrigin) {
        let { width, height } = this.imgOriginSize
        let windowWidth = window.innerWidth

        this.bigImgWrapStyle = Object.assign({}, this.bigImgWrapStyle, {
          width: width + 'px',
          height: height + 'px',
          top: `${this.baseTop}px`,
          left: (windowWidth - this.baseLeft - width) / 2 + 'px',
          opacity: 1,
          scale: 1,
          rotate: 0
        })
      } else {
        this.handleSetImgWrapStyle()
      }
      this.imgIsOrigin = !this.imgIsOrigin
    },
    // 旋转图片
    handleRotateImg (deg) {
      this.bigImgWrapStyle.rotate += deg
    },
    // 伸缩图片
    handleFlexImgStart (e, direction) {
      let { rotate } = this.bigImgWrapStyle

      direction = (direction + 4 + (rotate / 90) % 4) % 4

      if (direction === 0) {
        this.handleFlexDotMouseDown(e, -1, -1)
      } else if (direction === 1) {
        this.handleFlexDotMouseDown(e, 1, -1)
      } else if (direction === 2) {
        this.handleFlexDotMouseDown(e, 1, 1)
      } else {
        this.handleFlexDotMouseDown(e, -1, 1)
      }
    },
    handleFlexDotMouseDown (e, xBase, yBase) {
      this.mousePosition = Object.assign({}, this.mousePosition, {
        x: e.clientX,
        y: e.clientY,
        isDotDown: true,
        xBase,
        yBase
      })
    },
    handleFlexDotMouseMove (e) {
      if (!this.mousePosition.isDotDown) return false

      let { x: previousX, y: previousY, xBase, yBase } = this.mousePosition
      let distanceX = e.clientX - previousX
      let distanceY = e.clientY - previousY
      let { width, height, top, left, rotate } = this.bigImgWrapStyle
      let leftAdd = 0
      let topAdd = 0
      let xAdd = xBase * distanceX
      let yAdd = yBase * distanceY

      if ((rotate + 360) % 180 !== 0) {
        [xAdd, yAdd] = [yAdd, xAdd]
      }

      if (xBase < 0 && yBase < 0) {
        leftAdd = -xBase * distanceX
        topAdd = -yBase * distanceY
      } else if (xBase > 0 && yBase < 0) {
        leftAdd = 0
        topAdd = -yBase * distanceY
      } else if (xBase < 0 && yBase > 0) {
        leftAdd = -xBase * distanceX
        topAdd = 0
      } else {
        leftAdd = 0
        topAdd = 0
      }

      this.bigImgWrapStyle = Object.assign({}, this.bigImgWrapStyle, {
        width: Number.parseInt(width) + xAdd + 'px',
        height: Number.parseInt(height) + yAdd + 'px',
        top: Number.parseInt(top) + topAdd + 'px',
        left: Number.parseInt(left) + leftAdd + 'px'
      })
      this.mousePosition = Object.assign({}, this.mousePosition, {
        x: e.clientX,
        y: e.clientY
      })
    },
    handleFlexDotMouseUp () {
      this.mousePosition.isDotDown = false
    },
    // view整体动画
    handleCloseView () {
      this.$emit('update:view', false)
      this.$emit('update:showFlag', false)
      this.isViewHidden = true
      setTimeout(() => {
        this.isViewHidden = false
      }, 300)
    }
  }
}
